<template>
    <div class="app-container x-container" v-loading="loading">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px" class="demo-ruleForm">
            <el-form-item label="关键字名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入关键字名" clearable maxlength="50" />
            </el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="属性选择" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择属性选择" clearable>
                            <el-option :label="key" :value="value" v-for="(key, value) in publicParams.GAME_TYPE" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="分类" prop="tag_id">
                        <el-cascader @change="changeTag" :show-all-levels="false" v-model="ruleForm.tag_id"
                            placeholder="请选择分类" :props="{
                                value: 'id',
                                label: 'name',
                                children: 'children',
                                emitPath: false,
                                expandTrigger: 'hover'
                            }" :options="classList" filterable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="语言类型" prop="language">
                        <el-select v-model="ruleForm.language" placeholder="请选择语言类型" clearable>
                            <el-option :label="key" :value="value" v-for="(key, value) in publicParams.LANGUAGE_TYPE" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="厂商选择" prop="makers">
                        <el-input v-model="ruleForm.makers" placeholder="请输入厂商选择" clearable maxlength="50" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备案码" prop="filing_code">
                        <el-input v-model="ruleForm.filing_code" placeholder="请输入备案码" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="关联关键词" prop="relate_ids">
                        <association ref="associationKRef" v-if="!loading" type="1" :tagType="ruleForm.tag_id"
                            v-model="ruleForm.relate_ids" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="关联合集" prop="collection_ids">
                        <association type="2" v-model="ruleForm.collection_ids"></association>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="flex-center-align" :span="24">
                    <el-button @click="cancelForm(ruleFormRef)">取消</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>

</template>

<script setup>
import { addKeyword, editKeyword, getKeywordDetail } from '@/api/keywords'
import { getSelect } from '@/api/tag'
import { reactive, ref, toRaw, inject, computed } from 'vue'
import association from '@/components/association/index.vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
const publicParams = inject('publicParams')
const used = inject('used')

const ruleFormRef = ref()
const ruleForm = reactive(
    {
        name: '',
        language: '',
        type: '',
        tag_id: '',
        makers: '',
        is_recommend: '',
        is_timing: '',
        relate_ids: '',
        collection_ids: '',
        filing_code: ''
    }
)
const rules = reactive(
    {
        name: [
            { required: true, message: '请输入关键字名', trigger: 'blur' },
        ],
        tag_id: [
            { required: true, message: '请选择分类', trigger: 'blur' },
        ],
        makers: [
            { required: true, message: '请输入厂商', trigger: 'blur' },
        ],
        language: [
            { required: true, message: '请选择语言类型', trigger: 'change' },
        ],
        type: [
            { required: true, message: '请选择属性类型', trigger: 'change' },
        ],
        filing_code: [
            { required: true, message: '请输入备案码', trigger: 'change' },
        ],
    }
)

//选择分类
const classList = ref([]);
getSelect().then(res => {
    classList.value = res.data;
})
let associationKRef = ref(false);
//选择分类
const changeTag = (type) => {
    ruleForm.relate_ids = '';
    associationKRef.value.setTagTypeId(type)
}


/* 获取详情数据 */
let loading = ref(true);
const getDetail = async () => {
    const { data } = await getKeywordDetail({ id: route.query.id })
    if (Array.isArray(data.collection_ids)) {
        data.collection_ids = data.collection_ids.join(',')
    }
    if (Array.isArray(data.relate_ids)) {
        data.relate_ids = data.relate_ids.join(',')
    }
    data.language = data.language + ''
    data.type = data.type + ''
    Object.assign(ruleForm, data)
    loading.value = false;
}
let id = ref(route.query.id);
if (id.value) {
    loading.value = true;
    getDetail()
} else {
    loading.value = false;
}

//提交
const submitForm = async (formEl) => {
    let params = used.deepClone(ruleForm)
    // params.relate_ids = params.relate_ids.join(',')
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let res;
            if (id.value) {
                res = await editKeyword(params, 'post');
            } else {
                res = await addKeyword(params);
            }
            if (res.code == 1) {
                used.msgSuccess(res.message)
                router.go(-1)
            } else {
                used.msgError(res.message)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
//取消
const cancelForm = (formEl) => {
    router.go(-1)
}
//重置
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped lang="scss">
.x-container {
    position: relative;
    padding: 20px;
    background-color: #fff;
}
</style>